<!DOCTYPE html>
<html>
<head>
    <title>角色管理</title>
    <% include("../layout/cssPart.html"){} %>
</head>
<body>

<!-- 页面加载loading -->
<% include("../layout/loading.html"){} %>

<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">

            <div class="layui-form toolbar">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label w-auto">搜索：</label>
                        <div class="layui-input-inline mr0">
                            <input id="edtSearch" class="layui-input" type="text" placeholder="输入关键字"/>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <button id="btnSearch" class="layui-btn icon-btn"><i class="layui-icon">&#xe615;</i>搜索</button>
                        <button id="btnAdd" class="layui-btn icon-btn"><i class="layui-icon">&#xe654;</i>添加</button>
                    </div>
                </div>
            </div>

            <table class="layui-table" id="roleTable" lay-filter="roleTable"></table>

        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="auth">权限分配</a>
</script>

<!-- js部分 -->
<% include("../layout/jsPart.html"){} %>
<script>
    layui.use(['layer', 'form', 'table', 'util', 'admin'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var util = layui.util;
        var admin = layui.admin;

        //渲染表格
        table.render({
            elem: '#roleTable',
            url: 'role/list',
            page: false,
            cols: [[
                {type: 'numbers'},
                {field: 'code', sort: true, title: '角色编码'},
                {field: 'name', sort: true, title: '角色名'},
                {field: 'description', sort: true, title: '备注'},
                {
                    sort: true, templet: function (d) {
                    return util.toDateString(d.createTime);
                }, title: '创建时间'
                },
                {align: 'center', toolbar: '#tableBar', title: '操作'}
            ]]
        });

        // 添加按钮点击事件
        $('#btnAdd').click(function () {
            showEditModel();
        });

        // 搜索按钮点击事件
        $('#btnSearch').click(function () {
            var keyword = $('#edtSearch').val();
            table.reload('roleTable', {where: {keyword: keyword}});
        });

        // 工具条点击事件
        table.on('tool(roleTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') { //修改
                showEditModel(data);
            } else if (obj.event === 'del') { //删除
                doDelete(obj);
            } else if (obj.event === 'auth') {  // 权限管理
                showPermDialog(obj.data.id);
            }
        });

        // 删除
        function doDelete(obj) {
            top.layer.confirm('确定要删除吗？', function () {
                layer.load(2);
                $.post('role/delete', {
                    roleId: obj.data.roleId
                }, function (data) {
                    layer.closeAll('loading');
                    if (data.code == 200) {
                        layer.msg(data.msg, {icon: 1});
                        obj.del();
                    } else {
                        layer.msg(data.msg, {icon: 2});
                    }
                });
            });
        }

        // 显示编辑弹窗
        function showEditModel(data) {
            admin.putTempData('t_role', data);
            admin.putTempData('formOk', false);
            top.layui.admin.open({
                type: 2,
                title: data ? '修改角色' : '添加角色',
                area: ['380px', '293px'],
                content: 'system/role/editForm',
                end: function () {
                    admin.getTempData('formOk') && table.reload('roleTable');  // 成功刷新表格
                }
            });
        }

        // 权限管理
        function showPermDialog(roleId) {
            top.layui.admin.open({
                type: 2,
                title: '角色权限分配',
                area: ['380px', '455px'],
                content: 'system/role/auth?roleId=' + roleId
            });
        }

    });

</script>
</body>

</html>